<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <title>Material Design Color - PlaneUI 组件示例</title>

        <link rel="icon" type="image/png" href="favicon.png" />
        <link rel="stylesheet" type="text/css" href="./../../dist/css/planeui.css" />
        <style>     
            .container{width:23%;float:left;margin-bottom: 10px;margin-left: 10px;}
            .box {padding:10px;}
            
            @media (max-width: 640px) {
                .container {width: 46%;}
            }
        </style>
	</head>
	<body>
        <div class="pui-layout" style="width:96%;">
            <br/>
            <h4>Material Design Colors</h4> 
            <p><small>兼容情况： 支持 IE8+ （IE7 及以下版本未测试）</small></p><br/>
            <div class="container">
                <div class="box pui-bg-red-50">red-50</div>
                <div class="box pui-bg-red-100">red-100</div>
                <div class="box pui-bg-red-200">red-200</div>
                <div class="box pui-bg-red-300">red-300</div>
                <div class="box pui-bg-red-400">red-400</div>
                <div class="box pui-bg-red-500">red-500</div>
                <div class="box pui-bg-red-600">red-600</div>
                <div class="box pui-bg-red-700">red-700</div>
                <div class="box pui-bg-red-800">red-800</div>
                <div class="box pui-bg-red-900">red-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-pink-50">pink-50</div>
                <div class="box pui-bg-pink-100">pink-100</div>
                <div class="box pui-bg-pink-200">pink-200</div>
                <div class="box pui-bg-pink-300">pink-300</div>
                <div class="box pui-bg-pink-400">pink-400</div>
                <div class="box pui-bg-pink-500">pink-500</div>
                <div class="box pui-bg-pink-600">pink-600</div>
                <div class="box pui-bg-pink-700">pink-700</div>
                <div class="box pui-bg-pink-800">pink-800</div>
                <div class="box pui-bg-pink-900">pink-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-purple-50">purple-50</div>
                <div class="box pui-bg-purple-100">purple-100</div>
                <div class="box pui-bg-purple-200">purple-200</div>
                <div class="box pui-bg-purple-300">purple-300</div>
                <div class="box pui-bg-purple-400">purple-400</div>
                <div class="box pui-bg-purple-500">purple-500</div>
                <div class="box pui-bg-purple-600">purple-600</div>
                <div class="box pui-bg-purple-700">purple-700</div>
                <div class="box pui-bg-purple-800">purple-800</div>
                <div class="box pui-bg-purple-900">purple-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-deep-purple-50">deep-purple-50</div>
                <div class="box pui-bg-deep-purple-100">deep-purple-100</div>
                <div class="box pui-bg-deep-purple-200">deep-purple-200</div>
                <div class="box pui-bg-deep-purple-300">deep-purple-300</div>
                <div class="box pui-bg-deep-purple-400">deep-purple-400</div>
                <div class="box pui-bg-deep-purple-500">deep-purple-500</div>
                <div class="box pui-bg-deep-purple-600">deep-purple-600</div>
                <div class="box pui-bg-deep-purple-700">deep-purple-700</div>
                <div class="box pui-bg-deep-purple-800">deep-purple-800</div>
                <div class="box pui-bg-deep-purple-900">deep-purple-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-indigo-50">indigo-50</div>
                <div class="box pui-bg-indigo-100">indigo-100</div>
                <div class="box pui-bg-indigo-200">indigo-200</div>
                <div class="box pui-bg-indigo-300">indigo-300</div>
                <div class="box pui-bg-indigo-400">indigo-400</div>
                <div class="box pui-bg-indigo-500">indigo-500</div>
                <div class="box pui-bg-indigo-600">indigo-600</div>
                <div class="box pui-bg-indigo-700">indigo-700</div>
                <div class="box pui-bg-indigo-800">indigo-800</div>
                <div class="box pui-bg-indigo-900">indigo-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-blue-50">blue-50</div>
                <div class="box pui-bg-blue-100">blue-100</div>
                <div class="box pui-bg-blue-200">blue-200</div>
                <div class="box pui-bg-blue-300">blue-300</div>
                <div class="box pui-bg-blue-400">blue-400</div>
                <div class="box pui-bg-blue-500">blue-500</div>
                <div class="box pui-bg-blue-600">blue-600</div>
                <div class="box pui-bg-blue-700">blue-700</div>
                <div class="box pui-bg-blue-800">blue-800</div>
                <div class="box pui-bg-blue-900">blue-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-cyan-50">cyan-50</div>
                <div class="box pui-bg-cyan-100">cyan-100</div>
                <div class="box pui-bg-cyan-200">cyan-200</div>
                <div class="box pui-bg-cyan-300">cyan-300</div>
                <div class="box pui-bg-cyan-400">cyan-400</div>
                <div class="box pui-bg-cyan-500">cyan-500</div>
                <div class="box pui-bg-cyan-600">cyan-600</div>
                <div class="box pui-bg-cyan-700">cyan-700</div>
                <div class="box pui-bg-cyan-800">cyan-800</div>
                <div class="box pui-bg-cyan-900">cyan-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-teal-50">teal-50</div>
                <div class="box pui-bg-teal-100">teal-100</div>
                <div class="box pui-bg-teal-200">teal-200</div>
                <div class="box pui-bg-teal-300">teal-300</div>
                <div class="box pui-bg-teal-400">teal-400</div>
                <div class="box pui-bg-teal-500">teal-500</div>
                <div class="box pui-bg-teal-600">teal-600</div>
                <div class="box pui-bg-teal-700">teal-700</div>
                <div class="box pui-bg-teal-800">teal-800</div>
                <div class="box pui-bg-teal-900">teal-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-green-50">green-50</div>
                <div class="box pui-bg-green-100">green-100</div>
                <div class="box pui-bg-green-200">green-200</div>
                <div class="box pui-bg-green-300">green-300</div>
                <div class="box pui-bg-green-400">green-400</div>
                <div class="box pui-bg-green-500">green-500</div>
                <div class="box pui-bg-green-600">green-600</div>
                <div class="box pui-bg-green-700">green-700</div>
                <div class="box pui-bg-green-800">green-800</div>
                <div class="box pui-bg-green-900">green-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-light-green-50">light-green-50</div>
                <div class="box pui-bg-light-green-100">light-green-100</div>
                <div class="box pui-bg-light-green-200">light-green-200</div>
                <div class="box pui-bg-light-green-300">light-green-300</div>
                <div class="box pui-bg-light-green-400">light-green-400</div>
                <div class="box pui-bg-light-green-500">light-green-500</div>
                <div class="box pui-bg-light-green-600">light-green-600</div>
                <div class="box pui-bg-light-green-700">light-green-700</div>
                <div class="box pui-bg-light-green-800">light-green-800</div>
                <div class="box pui-bg-light-green-900">light-green-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-lime-50">lime-50</div>
                <div class="box pui-bg-lime-100">lime-100</div>
                <div class="box pui-bg-lime-200">lime-200</div>
                <div class="box pui-bg-lime-300">lime-300</div>
                <div class="box pui-bg-lime-400">lime-400</div>
                <div class="box pui-bg-lime-500">lime-500</div>
                <div class="box pui-bg-lime-600">lime-600</div>
                <div class="box pui-bg-lime-700">lime-700</div>
                <div class="box pui-bg-lime-800">lime-800</div>
                <div class="box pui-bg-lime-900">lime-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-yellow-50">yellow-50</div>
                <div class="box pui-bg-yellow-100">yellow-100</div>
                <div class="box pui-bg-yellow-200">yellow-200</div>
                <div class="box pui-bg-yellow-300">yellow-300</div>
                <div class="box pui-bg-yellow-400">yellow-400</div>
                <div class="box pui-bg-yellow-500">yellow-500</div>
                <div class="box pui-bg-yellow-600">yellow-600</div>
                <div class="box pui-bg-yellow-700">yellow-700</div>
                <div class="box pui-bg-yellow-800">yellow-800</div>
                <div class="box pui-bg-yellow-900">yellow-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-amber-50">amber-50</div>
                <div class="box pui-bg-amber-100">amber-100</div>
                <div class="box pui-bg-amber-200">amber-200</div>
                <div class="box pui-bg-amber-300">amber-300</div>
                <div class="box pui-bg-amber-400">amber-400</div>
                <div class="box pui-bg-amber-500">amber-500</div>
                <div class="box pui-bg-amber-600">amber-600</div>
                <div class="box pui-bg-amber-700">amber-700</div>
                <div class="box pui-bg-amber-800">amber-800</div>
                <div class="box pui-bg-amber-900">amber-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-orange-50">orange-50</div>
                <div class="box pui-bg-orange-100">orange-100</div>
                <div class="box pui-bg-orange-200">orange-200</div>
                <div class="box pui-bg-orange-300">orange-300</div>
                <div class="box pui-bg-orange-400">orange-400</div>
                <div class="box pui-bg-orange-500">orange-500</div>
                <div class="box pui-bg-orange-600">orange-600</div>
                <div class="box pui-bg-orange-700">orange-700</div>
                <div class="box pui-bg-orange-800">orange-800</div>
                <div class="box pui-bg-orange-900">orange-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-deep-orange-50">deep-orange-50</div>
                <div class="box pui-bg-deep-orange-100">deep-orange-100</div>
                <div class="box pui-bg-deep-orange-200">deep-orange-200</div>
                <div class="box pui-bg-deep-orange-300">deep-orange-300</div>
                <div class="box pui-bg-deep-orange-400">deep-orange-400</div>
                <div class="box pui-bg-deep-orange-500">deep-orange-500</div>
                <div class="box pui-bg-deep-orange-600">deep-orange-600</div>
                <div class="box pui-bg-deep-orange-700">deep-orange-700</div>
                <div class="box pui-bg-deep-orange-800">deep-orange-800</div>
                <div class="box pui-bg-deep-orange-900">deep-orange-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-brown-50">brown-50</div>
                <div class="box pui-bg-brown-100">brown-100</div>
                <div class="box pui-bg-brown-200">brown-200</div>
                <div class="box pui-bg-brown-300">brown-300</div>
                <div class="box pui-bg-brown-400">brown-400</div>
                <div class="box pui-bg-brown-500">brown-500</div>
                <div class="box pui-bg-brown-600">brown-600</div>
                <div class="box pui-bg-brown-700">brown-700</div>
                <div class="box pui-bg-brown-800">brown-800</div>
                <div class="box pui-bg-brown-900">brown-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-grey-50">grey-50</div>
                <div class="box pui-bg-grey-100">grey-100</div>
                <div class="box pui-bg-grey-200">grey-200</div>
                <div class="box pui-bg-grey-300">grey-300</div>
                <div class="box pui-bg-grey-400">grey-400</div>
                <div class="box pui-bg-grey-500">grey-500</div>
                <div class="box pui-bg-grey-600">grey-600</div>
                <div class="box pui-bg-grey-700">grey-700</div>
                <div class="box pui-bg-grey-800">grey-800</div>
                <div class="box pui-bg-grey-900">grey-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-blue-grey-50">blue-grey-50</div>
                <div class="box pui-bg-blue-grey-100">blue-grey-100</div>
                <div class="box pui-bg-blue-grey-200">blue-grey-200</div>
                <div class="box pui-bg-blue-grey-300">blue-grey-300</div>
                <div class="box pui-bg-blue-grey-400">blue-grey-400</div>
                <div class="box pui-bg-blue-grey-500">blue-grey-500</div>
                <div class="box pui-bg-blue-grey-600">blue-grey-600</div>
                <div class="box pui-bg-blue-grey-700">blue-grey-700</div>
                <div class="box pui-bg-blue-grey-800">blue-grey-800</div>
                <div class="box pui-bg-blue-grey-900">blue-grey-900</div>
            </div>
            <div class="container">
                <div class="box pui-bg-black">black</div>
                <div class="box pui-bg-white">white</div>
            </div>
        </div>

		<!--[if lt IE 9]>
		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="./../../dist/js/planeui.iepatch.js"></script>
		<![endif]-->
        <!--[if (gte IE 9) | !(IE)]><!-->
		<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <!--<![endif]-->
		<script type="text/javascript" src="./../../dist/js/planeui.js"></script>
    </body>
</html>